<template>
  <div>
    <div class="card" style="margin-bottom: 10px;" v-if="data.user.role === 'USER'">你好同学！欢迎您使用本系统，祝您毕业顺利！</div>
      <el-scrollbar class="card" max-height="600px" style="width: 50%" v-if="data.user.role === 'USER'">
      <div style="margin-bottom: 20px; font-size: 18px;">系统公告</div>
      <el-timeline style="max-width: 600px">
        <el-timeline-item color="#0bbd87" v-for="item in data.noticeData" :key="item.id" :timestamp="item.time" placement="top" >
          <el-card>
            <h4 style="font-size: 18px">{{item.title}}</h4>
            <p>{{item.content}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      </el-scrollbar>
    <div v-else style="margin-top: 10px;">
      <div style="display: flex; grid-gap: 10px">
        <div class="card" style="height: 270px; width: 50%" id="pie"/>
        <div class="card" style="height: 270px; width: 50%" id="bar"/>
      </div>
      <div class="card" style="height: 380px; width: 100%;margin-top: 10px" id="line"/>
    </div>
  </div>
</template>
<script setup>
import { reactive,onMounted,onBeforeUnmount } from "vue";
import request from "@/utils/request.js";
import * as echarts from 'echarts';
//  数据定义
const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}'),
  noticeData: [],
})
const loadNotice = () => {
  request.get('notice/selectPage').then(res =>{
    if(res.code === '200'){
      data.noticeData =res.data.list
    }else {
      ElMessage.error(res.msg)
    }
  })
}
loadNotice()

const loadPie = () => {
  request.get('/echarts/pie').then(res =>{
    if(res.code === '200'){
      let chartDom = document.getElementById('pie');
      let myChart = echarts.init(chartDom);
      pieOptions.series[0].data = res.data
      myChart.setOption(pieOptions);
      console.log(res)
    }else {
      ElMessage.error(res.msg)
    }
  })
}
const loadBar = () => {
  request.get('/echarts/bar').then(res =>{
    console.log(res)
    if(res.code === '200'){
      let chartDom = document.getElementById('bar');
      let myChart = echarts.init(chartDom);
      barOptions.xAxis.data = res.data.xList
      barOptions.series[0].data = res.data.yList
      myChart.setOption(barOptions);
    }else {
      ElMessage.error(res.msg)
    }
  })
}
const loadLine = () => {
  request.get('/echarts/line').then(res =>{
    console.log(res)
    if(res.code === '200'){
      let chartDom = document.getElementById('line');
      let myChart = echarts.init(chartDom);
      lineOptions.xAxis.data = res.data.xAxis
      lineOptions.series[0].data = res.data.yAxis
      myChart.setOption(lineOptions);
    }else {
      ElMessage.error(res.msg)
    }
  })
}

onMounted(() => {
  loadPie()
  loadBar()
  loadLine()
})
// 饼图
let pieOptions = {
  title: {
    text: '不同分类下用户发布旅游攻略帖子的数量',  //主标题
    subtext: '统计维度: 攻略分类', //副标题
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '数据占比', // 鼠标移上去显示的信息
      type: 'pie',
      radius: '50%',
      center: ['50%', '50%'],
      top:  '20%',
      data: [
        { value: 1048, name: '风景名胜' },
        { value: 735, name: '历史古迹' },
        { value: 580, name: '人文景观' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
// 柱状图
let barOptions = {
  title: {
    text: '不同用户发布帖子数量Top4',  //主标题
    subtext: '统计维度: 用户昵称', //副标题
    left: 'center'
  },
  grid: {  //----------增加这个属性，bottom就是底部的坐标轴距离----------
    top: '30%',
    bootom: '20%',
    left: '10%',
    right: '15%',
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  xAxis: {
    type: 'category',
    data: ['Strategy', 'History', 'Culture'],
    name: '用户昵称',
    axisLabel: {
      show: true, //是否显示刻度标签，默认显示
      interval: 0, //坐标轴刻度标签的显示间隔，在类目轴中有效 默认为0，即全部显示
      rotate: -60, //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候会自动进行旋转
      inside: false, //刻度标签是否朝内，默认朝外
      margin: 6, //刻度标签与轴线之间的距离
    },
  },
  yAxis: {
    type: 'value',
    name: '攻略数量'
  },
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      data: [10, 52, 20],//示例数据 横坐标维度对应的值
      type: 'bar',
      itemStyle: {
          color: function () {
            return '#' + Math.floor(Math.random() * (256*256*256 - 1)).toString(16);
        }
      }
    }
  ]
}
// 折线图
let lineOptions = {
  title: {
    text: '最近一周每天平台用户发布的帖子数量',  //主标题
    subtext: '统计维度: 最近一周', //副标题
    left: 'center'
  },
  grid: {  //----------增加这个属性，bottom就是底部的坐标轴距离----------
    bootom: '3%',
    left: '3%',
    right: '4%',
    containLabel: true
  },
  legend: {
    data: [],
    template:""
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'category',
    data: ['1', '2', '3', '4', '5', '6', '7'],
    name: '日期'
  },
  yAxis: {
    type: 'value',
    name: '攻略数量'
  },
  series: [
    {
      name: '攻略数量',
      data: [10, 52, 20, 33, 45, 12, 20],
      type: 'line',
      smooth: true,
      markLine:{
        data:[
          { type:'average', name:'最近一周场攻略发布数量平均值' }
        ]
      },
      markPoint:{
        data:[
          { type:'max', name:'最大值' },
          { type:'min', name:'最小值' }
        ]
      }
    }
  ]
}
</script>

<style scoped>

</style>